<template>
  <el-dialog
    title="订单配送详情"
    width="60%"
    class="el-dialog-box"
    :visible.sync="dialogVisible"
  >
    <div class="edit-label-content">
      <div class="container">
        <el-row class="row">
          <el-col :span="12">骑手姓名: {{ infoForm.riderName }}</el-col>
          <el-col :span="8">骑手手机号: {{ infoForm.riderMobile }}</el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="12">配送状态: {{ [
                    "待接单",
                    "正在赶往商家",
                    "到店取货中",
                    "配送中",
                    "已完成",
                    "失败",
                    "已取消",
                  ][infoForm.status] }}</el-col>
          <el-col :span="10"
            >接单时间: {{ infoForm.startTime || "--" }}</el-col
          >
        </el-row>

        <el-row class="row">
          <el-col :span="12">取货地址: {{ infoForm.shopAddress }}</el-col>
          <el-col :span="10"
            >配送地址: {{ infoForm.userAddr || "--" }}</el-col
          >
        </el-row>

        <el-row class="row">
          <el-col :span="12">店铺名称: {{ infoForm.shopName }}</el-col>
          <el-col :span="10"
            >店铺联系电话: {{ infoForm.shopTel || "--" }}</el-col
          >
        </el-row>

        <el-row class="row">
          <el-col :span="12">收货人: {{ infoForm.userName }}</el-col>
          <el-col :span="10"
            >收货人联系电话: {{ infoForm.userMobile || "--" }}</el-col
          >
        </el-row>

        <el-row class="row">
          <el-col :span="12">配送费: {{ infoForm.freightAmount }}</el-col>
          <el-col :span="10"
            >预计送达时间: {{ infoForm.estimatedDeliveryTime || "--" }}</el-col
          >
        </el-row>
        <el-row class="row">
          <el-col :span="10" :offset="12"
            >完成配送时间: {{ infoForm.finallyTime || "--" }}</el-col
          >
        </el-row>

        <el-row> <div class="table-title">商品配送信息</div> </el-row>
          <el-table :data="infoForm.items" border class="table">
            <el-table-column
              prop="prodName"
              align="center"
              label="商品图片"
            >
            <template slot-scope="scope">
              <el-image :src="resourcesUrl + scope.row.pic" alt="" :preview-src-list="[resourcesUrl + scope.row.pic]" />
            </template>
            </el-table-column>
            <el-table-column
              prop="prodName"
              align="center"
              label="商品名称"
            >
            </el-table-column>
            <el-table-column
              prop="prodCount"
              align="center"
              label="数量"
              width="160"
            >
            </el-table-column>
            <el-table-column
              prop="actualTotal"
              align="center"
              label="小计"
              width="160"
            >
            </el-table-column>
            <el-table-column
              prop="actualTotal"
              align="center"
              label="实付"
              width="160"
            >
            </el-table-column>
          </el-table>
      </div>
    </div>
    <!-- 按键 -->
    <span slot="footer" class="dialog-footer">
      <div class="default-btn" @click="dialogVisible = false">
        {{ $t("user.calcel") }}
      </div>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        id: "",
        dialogVisible: false,
        infoForm: {},
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,

      };
    },
    mounted() {},
    methods: {
      open(id, payload) {
        this.id = id;
        this.dialogVisible = true;
        this.getInfo();
      },
      getInfo() {
        this.$http({
          url: this.$http.adornUrl("/platform/rider/order-rider/" + this.id),
          method: "get",
        }).then(({ data }) => {
          this.infoForm = data;
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .container {
    font-size: 14px;
  }
  .row {
    margin-bottom: 20px;
  }
  .passage-certificate {
    display: flex;
  }
  .passage-certificate-pic-box {
    border: 1px dotted #ccc;
    box-sizing: border-rgb(229, 229, 229);
    padding: 10px;
    margin-left: 20px;
    .passage-certificate-pic {
      max-height: 100px;
      max-width: 100px;
    }
  }

  .table-title {
    font-weight: bold;
    margin-bottom: 20px;
  }
  .table {
    width: 90%;
    margin: 0 auto;
  }
</style>
